<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';

import deviceview from './module/deviceview.vue';
import monitorview from './module/monitorview.vue';
// import { getAirportList } from '#/api/daping/apiport';
import { getDeviceList } from '#/api/daping/airport';

const router = useRouter();
const airport_list = ref()
const airport_list_loading = ref(true)
const set_device_list_switch = (list) => {
  let arr = [];
  for (let i in list) {
    let d = list[i]
    d.switch = true
    arr.push(d)
  }
  return arr;
}
const get_list = async () => {
  airport_list_loading.value = true
  try {
    const { data } = await getDeviceList({});
    airport_list.value = set_device_list_switch(data)
    airport_list_loading.value = false;
  } catch (err) {
    airport_list_loading.value = false
    ElMessage.error('加载数据失败');
  }
}
onMounted(() => {
  get_list();
})
const view_num = ref(4)
const video_list = ref([{}, {}, {}, {}]);

const view_type = ref(false)
const switch_view_type = () => {
  view_type.value = !view_type.value
}

const view_index = ref()
const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `
</script>
<template>
  <div class="control-management" :class="{ fly: view_type }">
    <!-- <h3 class="control-header">飞算科技无人机平台</h3> -->
    <div class="drone">
      <div class="drone-left" v-loading="airport_list_loading" element-loading-text="Loading..."
        :element-loading-spinner="svg" element-loading-svg-view-box="-10, -10, 50, 50"
        element-loading-background="rgba(122, 122, 122, 0.8)" :style="view_type ? 'width:calc(100% - 1vw);' : ''">
        <monitorview v-if="!airport_list_loading" v-model:view-num="view_num" v-model:video-list="video_list"
          v-model:viewIndex="view_index" />
      </div>
      <div class="drone-right" :style="view_type ? 'width:1vw;' : ''">
        <div class="drone-right-content">
          <div class="box1" @click="switch_view_type">
            <img class="img" src="/static/wrjjk/dp_wrjjk_icon_show.png"
              :style="view_type ? 'transform:rotate(180deg)' : ''">
          </div>
          <div class="box2" v-loading="airport_list_loading" element-loading-text="Loading..."
            :element-loading-spinner="svg" element-loading-svg-view-box="-10, -10, 50, 50"
            element-loading-background="rgba(122, 122, 122, 0.8)">
            <deviceview v-if="!airport_list_loading" :device-list="airport_list" v-model:view-num="view_num"
              v-model:video-list="video_list" v-model:viewIndex="view_index" />
          </div>
        </div>
      </div>
    </div>
    <!-- <router-view /> -->
  </div>
</template>

<style lang="scss" scoped>
.control-management {
  width: 100%;
  // max-width: 100%;
  // height: 100%;
  // max-height: 100%;
  height: calc(92vh);
  padding: 0;
  // background: #707070;
  background-image: url('../../../../assets/jcbs_bg.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transition: height 0.6s ease-out;
  position: fixed;
  bottom: 0;

  .drone {
    display: flex;
    width: 100%;
    height: 100%;
    padding-top: 5vh;

    .drone-left {
      width: calc(100% - 17vw);
      // height: calc(100% - 4vh);
      height: calc(100%);
      padding-bottom: 1vh;
      padding-left: 1vw;
      transition: width 0.6s ease-out;
      // margin-right: 1rem;
      // margin: 1vh;
    }

    .drone-right {
      width: 17vw;
      height: calc(100%);
      transition: width 0.6s ease-out;
      background: linear-gradient(147deg, #02393E 0%, #00292D 6%, #00292D 100%);
      overflow: hidden;

      // padding-top: 5vh;
      // display: flex;
      // justify-content: flex-end;
      // margin: 1vh 1vh 1vh 0;
      // overflow-y: auto;
      .drone-right-content {
        width: 17vw;
        height: 100%;
        display: flex;

        .box1 {
          width: 1vw;
          // padding-top: 5vh;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;

          .img {
            width: 0.6vw;
          }
        }

        .box2 {
          width: calc(16vw);
        }
      }

    }
  }
}

.fly {
  height: calc(100vh);
  left: 0;
  z-index: 10;
  transition: height 0.6s ease-out;

  .drone {
    padding-top: 1vh;
    transition: padding-top 0.6s ease-out;
  }
}
</style>
